<template>
  <div class="progress-box" >
    <div class="progress-line" :style="{backgroundColor:props.color,width:props.percent+'%'}"></div>
  </div>
</template>

<script setup lang="ts">

import {ref, defineProps, computed,withDefaults} from "vue";

  let props =withDefaults(defineProps<{
    color?:string
    percent:number
  }>(),{
    width:"100%",
    height:"10px",
    color:'tomato'
  })

</script>

<style scoped lang="less">
  .progress-box{
    border-radius: 5px;
    background-color: #e5e5e5;
    width: 100%;
    height: 100%;
    max-height: 20px;
    .progress-line{
      height: 100%;
      border-radius: 5px;
      transition: width 0.5s;
    }
  }
</style>